<template>
  <div class="app-container">
    <div class="flex flex-items-start flex-justify-between pb-2px">
      <el-form ref="searchFormRef" :inline="true" :model="searchData">
        <div>
          <el-form-item prop="username">
            <el-input v-model="searchData.keyword" :placeholder="$t('tool.供应商')+'...'" clearable />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" round :icon="Search" @click="handleSearch">
              {{ $t('common.搜索') }}
            </el-button>
          </el-form-item>
        </div>
      </el-form>
      <div>
        <el-button type="primary" round>{{ $t('tool.联系官方客服进行境外电销、销售服务') }}</el-button>
      </div>
    </div>

    <div class="table-wrapper" v-loading="loading">
      <el-table :data="tableData" fixed="left" header-cell-class-name="cell-self-clas" cell-class-name="cell-class-name"
        :row-class-name="tableRowClassName" row-key="id" size="large" border>
        <el-table-column prop="gys" :label="$t('tool.供应商')" align="center" width="222" fixed>
          <template #default="{ row }">
            <div v-if="settingsStore.locale === 'zh'">
              <div class="border-gas"><span>{{ row.zh.gys }}</span></div>
              <div class="border-gas"><span>{{ row.ru.gys }}</span></div>
            </div>
            <div v-if="settingsStore.locale === 'ru'">
              <div class="border-gas"><span>{{ row.ru.gys }}</span></div>
              <div class="border-gas"><span>{{ row.zh.gys }}</span></div>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="cgs" :label="$t('tool.采购商')" align="center" min-width="180">
          <template #default="{ row }">
            <div v-if="settingsStore.locale === 'zh'">
              <div class="border-gas"><span>{{ row.zh.cgs }}</span></div>
              <div class="border-gas"><span>{{ row.ru.cgs }}</span></div>
            </div>
            <div v-if="settingsStore.locale === 'ru'">
              <div class="border-gas"><span>{{ row.ru.cgs }}</span></div>
              <div class="border-gas"><span>{{ row.zh.cgs }}</span></div>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="createtime" :label="$t('tool.日期')" align="center" min-width="120">
          <template #default="{ row }">
            <div v-if="settingsStore.locale === 'zh'">
              <div class="border-gas"><span>{{ row.zh.createtime }}</span></div>
              <div class="border-gas"><span>{{ row.ru.createtime }}</span></div>
            </div>
            <div v-if="settingsStore.locale === 'ru'">
              <div class="border-gas"><span>{{ row.ru.createtime }}</span></div>
              <div class="border-gas"><span>{{ row.zh.createtime }}</span></div>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="num" :label="$t('tool.数量')" align="center" min-width="80">
          <template #default="{ row }">
            <div v-if="settingsStore.locale === 'zh'">
              <div class="border-gas"><span>{{ row.zh.num }}</span></div>
              <div class="border-gas"><span>{{ row.ru.num }}</span></div>
            </div>
            <div v-if="settingsStore.locale === 'ru'">
              <div class="border-gas"><span>{{ row.ru.num }}</span></div>
              <div class="border-gas"><span>{{ row.zh.num }}</span></div>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="weight" :label="$t('tool.重量')" align="center" min-width="82">
          <template #default="{ row }">
            <div v-if="settingsStore.locale === 'zh'">
              <div class="border-gas"><span>{{ row.zh.weight }}</span></div>
              <div class="border-gas"><span>{{ row.ru.weight }}</span></div>
            </div>
            <div v-if="settingsStore.locale === 'ru'">
              <div class="border-gas"><span>{{ row.ru.weight }}</span></div>
              <div class="border-gas"><span>{{ row.zh.weight }}</span></div>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="HS_bh"  :label="$t('tool.HS编码')" align="center" min-width="120">
          <template #default="{ row }">
            <div v-if="settingsStore.locale === 'zh'">
              <div class="border-gas"><span>{{ row.zh.HS_bh }}</span></div>
              <div class="border-gas"><span>{{ row.ru.HS_bh }}</span></div>
            </div>
            <div v-if="settingsStore.locale === 'ru'">
              <div class="border-gas"><span>{{ row.ru.HS_bh }}</span></div>
              <div class="border-gas"><span>{{ row.zh.HS_bh }}</span></div>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="desc" :label="$t('tool.商品描述')" align="center" min-width="240">
          <template #default="{ row }">
            <div v-if="settingsStore.locale === 'zh'">
              <div class="border-gas"><span>{{ row.zh.desc }}</span></div>
              <div class="border-gas"><span>{{ row.ru.desc }}</span></div>
            </div>
            <div v-if="settingsStore.locale === 'ru'">
              <div class="border-gas"><span>{{ row.ru.desc }}</span></div>
              <div class="border-gas"><span>{{ row.zh.desc }}</span></div>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="ycg_zh"  :label="$t('tool.原产国')"  align="center" min-width="100">
          <template #default="{ row }">
            <div v-if="settingsStore.locale === 'zh'">
              <div class="border-gas"><span>{{ row.zh.ycg_zh }}</span></div>
              <div class="border-gas"><span>{{ row.ru.ycg_zh }}</span></div>
            </div>
            <div v-if="settingsStore.locale === 'ru'">
              <div class="border-gas"><span>{{ row.ru.ycg_zh }}</span></div>
              <div class="border-gas"><span>{{ row.zh.ycg_zh }}</span></div>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="mdg_zh" :label="$t('tool.目的国')" align="center" min-width="100">
          <template #default="{ row }">
            <div v-if="settingsStore.locale === 'zh'">
              <div class="border-gas"><span>{{ row.zh.mdg_zh }}</span></div>
              <div class="border-gas"><span>{{ row.ru.mdg_zh }}</span></div>
            </div>
            <div v-if="settingsStore.locale === 'ru'">
              <div class="border-gas"><span>{{ row.ru.mdg_zh }}</span></div>
              <div class="border-gas"><span>{{ row.zh.mdg_zh }}</span></div>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="mode"  :label="$t('tool.运输方式')" align="center" min-width="122">
          <template #default="{ row }">
            <div v-if="settingsStore.locale === 'zh'">
              <div class="border-gas"><span>{{ row.zh.mode }}</span></div>
              <div class="border-gas"><span>{{ row.ru.mode }}</span></div>
            </div>
            <div v-if="settingsStore.locale === 'ru'">
              <div class="border-gas"><span>{{ row.ru.mode }}</span></div>
              <div class="border-gas"><span>{{ row.zh.mode }}</span></div>
            </div>
          </template>
        </el-table-column>

      </el-table>
    </div>
    <div class="pager-wrapper mt-10px">
      <el-pagination :layout="paginationData.layout" :page-sizes="paginationData.pageSizes"
        :total="paginationData.total" :page-size="paginationData.pageSize" :current-page="paginationData.currentPage"
        @size-change="handleSizeChange" @current-change="handleCurrentChange" />
    </div>

  </div>
</template>


<script lang="ts" setup>
import type { ToolData } from "@@/apis/tool/type"
import type { FormInstance } from "element-plus"
import { useSettingsStore } from "@/pinia/stores/settings"
import { getHuokeList, } from "@@/apis/tool"
import { usePagination } from "@@/composables/usePagination"
import { Search } from "@element-plus/icons-vue"
import { inject } from 'vue'
const CL: any = inject("$CL");
import { useI18n } from 'vue-i18n';
const { locale, t } = useI18n();//登录国籍
defineOptions({
  // 命名当前组件
  name: "AcquisitionTool"
})
const settingsStore = useSettingsStore()
const loading = ref<boolean>(false)
const { paginationData, handleCurrentChange, handleSizeChange } = usePagination()


// #region 查
const tableData = ref<ToolData[]>([])
const searchFormRef = ref<FormInstance | null>(null)

const searchData = reactive({
  status: -1,
  keyword: '',
})




function getTableData() {
  loading.value = true
  let obj={
    page: paginationData.currentPage,
    limit: paginationData.pageSize,
    status: searchData.status,
    keyword: searchData.keyword,
  }
  let list=['keyword']
  if(locale.value=='ru'){
          for (let key in obj) {
            list.forEach((item=>{
              if (key === item) {
                obj[key + '_ru'] = obj[key]; // 将值赋给新 key
                delete obj[key];     // 删除旧的 key
              }
            }))
          }
  }
  getHuokeList(obj).then(({ data }) => {
    paginationData.total = data.count
    tableData.value = data.list;

  }).catch(() => {
    tableData.value = []
  }).finally(() => {
    loading.value = false
  })
}
function handleSearch() {
  paginationData.currentPage === 1 ? getTableData() : (paginationData.currentPage = 1)
}


// #endregion






// 表格隔行变色
interface User {
  date: string
  name: string
  address: string
}
const tableRowClassName = ({
  row,
  rowIndex,
}: {
  row: User
  rowIndex: number
}) => {
  if (rowIndex % 2 == 0) {
    return 'primary-row-color'
  } else {
    return 'info-row-color'
  }
}




// 监听分页参数的变化
watch([() => paginationData.currentPage, () => paginationData.pageSize], getTableData, { immediate: true })
</script>


<style lang="scss" scoped>
.search-wrapper {
  margin-bottom: 20px;

  :deep(.el-card__body) {
    padding-bottom: 2px;
  }
}


.border-gas {
  border-bottom: 1px solid #ebeef5;
  height: 80px;
  padding: 10px;
  display: flex;
  align-items: center;
  justify-content: center;

  &:last-child {
    border-bottom: none;
  }

  span {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.4em;
  }

}


.pager-wrapper {
  display: flex;
  justify-content: flex-end;
}


.app-container {
  display: flex;
  flex-direction: column;
  overflow: hidden;

  // 筛选项重置
  .el-form {
    .el-form-item {

      :deep(.el-form-item__content) {
        .el-date-editor {
          border-radius: 16px;
          background: #F2F3F5;
          box-shadow: 0px 2px 2px 0px rgba(45, 45, 45, 0.10);
        }
      }

      .el-input {
        :deep(.el-input__wrapper) {
          border-radius: 16px;
          box-shadow: 0px 2px 2px 0px rgba(45, 45, 45, 0.10);
          background: #F2F3F5;
        }

      }
    }

  }

  .el-select {
    :deep(.el-select__wrapper) {
      border-radius: 16px;
      background: #007AFF;

      .el-select__placeholder {
        color: #fff;
      }

      .el-select__suffix {
        .el-icon {
          color: #fff;
        }
      }
    }
  }



  .table-wrapper {
    flex: 1;
    overflow: hidden;

    .el-table {
      height: 100%;
      border-top-left-radius: 30px;
      border-top-right-radius: 30px;

      :deep(.cell-self-clas) {
        color: #1D2129 !important;
        font-size: 14px;
        font-weight: 400;
        background: #F2F3F5;
        // box-shadow: 0px 2px 2px 0px rgba(45, 45, 45, 0.10);
        border-right: none;

      }

      :deep(.cell-class-name) {
        color: #1D2129 !important;
        font-size: 14px;
        font-weight: 400;
        padding: 0;

        .cell {
          padding: 0;
        }
      }
    }

  }

  .order-wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 50px;

    .left-text {
      color: #1D2129;
      font-size: 14px;
      font-weight: 400;
    }
  }
}

:deep(.dialog-wrapppx) {
  background: linear-gradient(to right, #FBFCFD, #F5F9FD, #ECF6FD);
}

.info-self-btn {
  background: #F2F3F5;
  box-shadow: 0px 2px 2px 0px rgba(45, 45, 45, 0.10);
  color: #1D2129;
  border-color: transparent;
}
</style>


